<!DOCTYPE html>
<html lang="en" class="app">

<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
  />

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css"
  />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"
  />
  <link rel="stylesheet" href="less/app.css" type="text/css" />
  <link rel="stylesheet" href="less/message.css" type="text/css"
  />
  <!--[if lt IE 9]>
    <script src="plugins/ie/html5shiv.js"></script>
    <script src="plugins/ie/respond.min.js"></script>
    <script src="plugins/ie/excanvas.js"></script>
  <![endif]-->
</head>

<body>
  <section class="vbox">
    <!-- header -->
    <header class="bg-dark dk header navbar navbar-fixed-top-xs">
      <div class="navbar-header aside-md">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open"
          data-target="#nav,html">
          <i class="fa fa-bars"></i>
        </a>
        <a href="#" class="navbar-brand" data-toggle="fullscreen">
          <img src="images/logo.png" class="m-r-sm">Notebook</a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
          <i class="fa fa-cog"></i>
        </a>
      </div>
      <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="thumb-sm avatar pull-left">
              <img src="images/avatar.jpg">
            </span>
            John.Smith
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <span class="arrow top"></span>
            <li>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.html">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </header>

    <!-- section -->
    <section>
      <section class="hbox stretch">
        <!-- left -->
        <aside class="bg-dark lter aside-md hidden-print" id="nav">
          <section class="vbox">
            <section class="w-f scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true"
                data-distance="0" data-size="5px" data-color="#333333">
                <nav class="nav-primary hidden-xs">
                  <ul class="nav">
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>商家</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="salers.html">
                            <i class="fa fa-angle-right"></i>
                            <span>商家管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="redBagManage.html">
                            <i class="fa fa-angle-right"></i>
                            <span>红包管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="djq.html">
                            <i class="fa fa-angle-right"></i>
                            <span>代金券管理</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li name="order">
                      <a href="order.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-info"></b>
                        </i>
                        <span>订单管理</span>
                      </a>
                    </li>
                    <li name="identify">
                      <a href="identify.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-danger"></b>
                        </i>
                        <span>认证信息</span>
                      </a>
                    </li>
                    <li name="balance">
                      <a href="balance.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-primary"></b>
                        </i>
                        <span>余额管理</span>
                      </a>
                    </li>
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>官方账号</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="messageList.html">
                            <i class="fa fa-angle-right"></i>
                            <span>消息列表</span>
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <i class="fa fa-angle-right"></i>
                            <span>群发消息</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </nav>
              </div>
            </section>

            <!-- 缩小到侧边栏 -->
            <footer class="footer lt hidden-xs b-t b-dark">
              <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon">
                <i class="fa fa-angle-left text"></i>
                <i class="fa fa-angle-right text-active"></i>
              </a>
            </footer>
          </section>
        </aside>
        <!-- left -->

        <section class="vbox">
          <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
              <li>
                <i class="fa fa-home"></i>首页
              </li>
              <li>消息列表</li>
            </ul>
            <section class="panel panel-default">
              <div class="panel-body">
                <h5 class="m-t-none">
                  <i class="fa fa-user text-danger m-r-xs"></i>当前状态：
                  <small class="current-status"></small>
                </h5>
                <div class="message">
                  <div>
                    <table class="table table-hover m-b-none">
                      <thead>
                        <tr class="success">
                          <th class="col-a">消息</th>
                          <th class="col-b">时间</th>
                          <th class="col-c">操作</th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                  <div class="messageTbody">
                    <table class="table table-hover m-b-none">
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</body>

</html>



<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!--引入layer-->
<script src="plugins/layer/layer.js"></script>

<script src="js/NIM_Web_NIM_v4.8.0.js"></script>

<script type="text/javascript">
  var data = {};
  // 注意这里, 引入的 SDK 文件不一样的话, 你可能需要使用 SDK.NIM.getInstance 来调用接口
  var nim = NIM.getInstance({
    debug: true,
    appKey: '0166f645cd217b76b6e3bb3fbb9ceeee',
    account: 'yomo_local_1',
    token: 'e10adc3949ba59abbe56e057f20f883e',
    onconnect: onConnect,
    onwillreconnect: onWillReconnect,
    ondisconnect: onDisconnect,
    onerror: onError,
    onroamingmsgs: onRoamingMsgs,
    onofflinemsgs: onOfflineMsgs,
    onsessions: onSessions,
    onupdatesession: onUpdateSession
  });
  function onConnect() {
    $('.current-status').html('连接成功');
    console.log('连接成功');
  }
  function onWillReconnect(obj) {
    // 此时说明 SDK 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
    $('.current-status').html('即将重连');
    console.log('即将重连');
    console.log(obj.retryCount);
    console.log(obj.duration);
  }
  function onDisconnect(error) {
    // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
    $('.current-status').html('丢失连接').prev('i').removeClass('text-danger');
    layer.open({
      title: '提示',
      content: error + '\n 丢失连接,确认重连吗？',
      yes: function () {
        location.reload();
      },
      cancel: function () {
        //右上角关闭回调
        return false;
      }
    });
    console.log(error);
  }
  function onError(error) {
    console.log(error);
  }

  function onSessions(sessions) {
    console.log('收到会话列表', sessions);
    data.sessions = nim.mergeSessions(data.sessions, sessions);
    for (var i = data.sessions.length - 1; i >= 0; i--) {
      updateSessionsUI(data.sessions[i]);
    }
  }
  function onUpdateSession(session) {
    console.log('会话更新了', session);
    data.sessions = nim.mergeSessions(data.sessions, session);
    updateSessionsUI(session);
  }

  function onOfflineMsgs(obj) {
    console.log('收到离线消息 ', obj);
    updateMsgs(obj);
  }

  function onRoamingMsgs(obj) {
    console.log('收到漫游消息', obj);
    updateMsgs(obj);
  }

  function updateMsgs(obj) {
    if ($('#' + obj.sessionId)) {
      $('#' + obj.sessionId).remove();
    }
    var newSession = '<tr id="' + obj.sessionId + '">' +
      '<td class="col-a">' +
      '<div>' +
      '<img src="images/app.png" onclick="imgMagnify($(this).attr(\'src\'))">' +
      '<div class="m-l">' +
      '<p>昵称：<span class="nick-name">' + to + '</span>' +
      '<span class="btn btn-warning btn-rounded btn-xs m-l-sm">未读</span>' +
      '</p>' +
      '<p>消息内容:' + obj.msgs[obj.msgs.length - 1].text + '</p>' +
      '</div>' +
      '</div>' +
      '</td>' +
      '<td class="col-b">' + format(obj.msgs[obj.msgs.length - 1].time) + '</td>' +
      '<td class="col-c">' +
      '<button type="button" class="btn btn-sm btn-danger delete-session">删除</button>' +
      '</td>' +
      '</tr >';
    $('.messageTbody tbody').prepend(newSession);
    nim.getUser({
      account: body.to,
      done: getUserDone
    });
  }

  function updateSessionsUI(body) {
    // 刷新界面
    var to = body.to;
    var lastMsgText = body.lastMsg.text;
    var lastUpdateTime = body.updateTime;
    nim.getUser({
      account: body.to,
      done: getUserDone
    });
    if ($('#' + to)) {
      console.log($(this));
      $('#' + to).remove();
    }
    var newSession = '<tr id="' + to + '">' +
      '<td class="col-a">' +
      '<div>' +
      '<img src="images/app.png" onclick="imgMagnify($(this).attr(\'src\'))">' +
      '<div class="m-l">' +
      '<p>昵称：<span class="nick-name">to</span>' +
      '<span class="btn ' + (body.unread ? 'btn-warning' : 'btn-success') + ' btn-rounded btn-xs m-l-sm">' + (body.unread ? '未读' : '已读') + '</span>' +
      '</p>' +
      '<p>消息内容:' + lastMsgText + '</p>' +
      '</div>' +
      '</div>' +
      '</td>' +
      '<td class="col-b">' + format(lastUpdateTime) + '</td>' +
      '<td class="col-c">' +
      '<button type="button" class="btn btn-sm btn-danger delete-session">删除</button>' +
      '</td>' +
      '</tr >';
    $('.messageTbody tbody').prepend(newSession);
  }

  function getUserDone(error, user) {
    console.log(user);
    console.log('获取用户资料' + (!error ? '成功' : '失败'));
    if (!error) {
      //更新id为user.account的tr的内容
      $('#' + user.account).find('img').attr('src', user.avatar);
      $('#' + user.account).find('.nick-name').html(user.nick);
      $('#' + user.account).attr('data-name', user.nick);
    }
  }

  function add0(m) { return m < 10 ? '0' + m : m }
  function format(shijianchuo) {
    //shijianchuo是整数，否则要parseInt转换
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
  }

  function deleteLocalSessionDone(error, obj) {
    console.log(error);
    console.log(obj);
    console.log('删除本地会话' + (!error ? '成功' : '失败'));
  }
</script>

<script>
  $(function () {
    // 删除会话
    $('.messageTbody')
      .on('click', '.delete-session', function (e) {
        e.stopPropagation();
        nim.deleteLocalSession({
          id: 'p2p-' + $(this).closest('tr')[0].id,
          done: deleteLocalSessionDone
        });
        $(this).closest('tr').remove();
      })
      .on('click', 'tr', function () {
        location.href = 'answer.html?userId=' + $(this).attr('id') + '&nickName=' + $(this).attr('data-name');
      })
  })
</script>
</body>

</html>